<template>
<div class="content">
  <head title="Selling"></head>
  <scroller class="navbar" scroll-direction="horizontal">
    <text
      v-for="(item, index) in navList"
      :key="index"
      class="nav-item"
      :ref="'item'+index"
      @click="tabClick(index)"
      :class="[tabCurrentIndex == index?'current':'']"
    >{{ item.text }}</text>
  </scroller>
  <slider class="slider" @change="slideChange" :index="tabCurrentIndex">
    <scroller
      class="listScroll"
      v-for="(item, index) in navList"
      :key="index"
      @loadmore="onloadmore"
      loadmoreoffset="200"
      :show-scrollbar="false"
    >
      <div
        v-if="item.orderList.length>0"
        v-for="(list, index2) in item.orderList"
        :key="index2"
        class="sellItem"
      >
        <div class="sellItem-con bb" @click="push('root:app/goods/goods2.js',{id:list.id})">
          <image class="imgList" :src="list.thumb" resize="cover" />
          <div class="bottomList">
            <text class="sellItem-tit">{{list.title}}</text>
            <text class="sellItem-mon">AU${{list.price}}</text>
          </div>
        </div>
        <div class="sellItem-act">
          <text class="actionItem" @click="push('root:app/goods/goods2.js',{id:list.id})">Detail</text>
          <!-- <text class="actionItem">Polish</text> -->
          <text class="actionItem" v-if="item.status=='1'" @click="revoke(list.id,2)">Remove</text>
          <text class="actionItem" @click="push('root:app/selling/selling.js',{id:list.id})">Edit</text>
          <text class="actionItem" v-if="item.status!='1'" @click="deleteId(list.id)">Delete</text>
          <text class="actionItem" v-if="item.status!='1'" @click="revoke(list.id,1)">Post</text>
        </div>
      </div>
      <empty v-if="item.orderList.length==0" :tips="`Your ${item.text} list is empty`"></empty>
    </scroller>
  </slider>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
import {
  get_goods_list,
  del_twohand_goods,
  lower_twohand_goods
} from "../../mixin/ajax.js";
import asCore from "../../mixin/core";
const editSell = new BroadcastChannel("editSell");

export default {
  data() {
    return {
      tabCurrentIndex: 0,
      page: 1,
      userId: "",

      navList: [
        {
          hasMore: true,
          status: 1,
          page: 1,
          text: "Online",
          loadingType: "more",
          total: 0,
          orderList: []
        },
        {
          hasMore: true,
          status: 2,
          text: "Offline",
          page: 1,
          loadingType: "more",
          total: 0,
          orderList: []
        }
      ]
    };
  },
  created() {
    let that = this;
    editSell.onmessage = function() {
      that.getOrderList("refersh");
    };
  },
  methods: {
    onLoad(param) {
      let type = 0;
      if (param && param.param) {
        return false;
      }
      if (param && param.type) {
        this.tabCurrentIndex = param.type - 0;
      }

      asCore.getBsessionid(userId => {
        this.userId = userId;
        this.getOrderList();
      });
    },
    onloadmore() {
      this.getOrderList();
    },
    getOrderList(source) {
      let index = this.tabCurrentIndex;
      let navItem = this.navList[index];
      if (source === "tabChange"||source == "refersh") {
        navItem.loaded = false;
        navItem.hasMore = true; 
        navItem.page = 1;
      }
      if (navItem.loaded === true) {
        //tab切换只有第一次需要加载数据
        return;
      }

      if (navItem.loadingType === "loading" || !navItem.hasMore) {
          //防止重复加载
          return;
        }
      navItem.loadingType = "loading";

      this.isLoading = true;
      get_goods_list(
        {
          users_id: this.userId,
          status: navItem.status,
          type: "2",
          page: navItem.page
        },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (navItem.page == 1) {
              navItem.orderList = res.data.list;
            } else {
              navItem.orderList = navItem.orderList.concat(res.data.list);
            }
            navItem.page++;
            this.$set(navItem, "total", res.data.total);
            this.$set(navItem, "loaded", true);
            if (navItem.orderList.length == res.data.total) {
              this.$set(navItem, "hasMore", false);
            }
            navItem.loadingType = "more";
          }
        }
      );
    },

    tabClick(index) {
      if (this.tabCurrentIndex == index) {
        return false;
      }
      this.tabCurrentIndex = index;
      this.getOrderList("tabChange");
    },
    deleteId(id) {
      this.isLoading = true;
      del_twohand_goods({ id: id }, (res, flag) => {
        this.isLoading = false;
        if (flag) {
          if (res.code == 200) {
            this.getOrderList("refersh");
          } else {
            this.toast(res.message);
          }
        }
      });
    },
    revoke(item, status) {
      this.isLoading = true;
      lower_twohand_goods({ id: item, status: status }, (res, flag) => {
        this.isLoading = false;
        if (flag) {
          if (res.code == 200) {
            this.getOrderList("refersh");
          } else {
            this.toast(res.message);
          }
        }
      });
    },

    slideChange(index) {
      if (this.tabCurrentIndex == index.index) {
        return false;
      }
      this.tabCurrentIndex = index.index;
      this.getOrderList("tabChange");
      const ref = this.$refs["item" + index.index];
      const el = ref ? ref[0] : null;
      const dom = weex.requireModule("dom");
      dom.scrollToElement(el, {
        offset: -250
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../style/sell/sellList.less";

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  height: 40px;
  width: 40px;
}
.content {
  background-color: #f5f5f5;
  flex: 1;
}

.navbar {
  height: 90px;
  width: 750px;
  flex-direction: row;
}

.nav-item {
  flex: 1;
  height: 90px;
  padding: 0 20px;
  margin: 0 20px;
  line-height: 90px;
  font-size: 30px;
  color: #333333;
  text-align: center;
}

.current {
  border-bottom-color: #ba8833;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  color: #ba8833;
}

.slider {
  flex: 1;
  position: relative;
}

.listScroll {
  flex: 1;
  background-color: #f5f5f5;
}

.listItem {
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 32px;
  width: 750px;
}

.listItem:active {
  background-color: #f2f2f2;
}

.titList {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.titLeft {
  flex-direction: row;
  align-items: center;
}

.imgList {
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.titname {
  font-size: 28px;
  color: #333;
  margin-right: 20px;
}

.iconfont {
  font-family: iconfont;
}

.titIcon {
  font-size: 24px;
  color: #999999;
}

.imgIcon {
  font-size: 32px;
  color: #999999;
}

.status {
  font-size: 28px;
  color: #ec414d;
}

.num {
  margin-right: 40px;
  font-size: 22px;
  color: #8e8e93;
}

.total {
  font-size: 22px;
  color: #8e8e93;
}

.symbol {
  font-size: 22px;
  color: #ec414d;
  margin: 0 10px;
}

.money {
  font-size: 22px;
  color: #ec414d;
}

.actionBox {
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 20px;
}

.actionItem {
  font-size: 28px;
  color: #333333;
  padding: 5px 15px;
  line-height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #333333;
  margin-left: 20px;
}

.actionItem:active {
  border-color: #cccccc;
  background-color: #cccccc;
}
</style>
